<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>web-ui-test</title>
<link href="../css/960.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui.css" rel="stylesheet" type="text/css"/>
<link href="../css/gh-buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body  class="macbg">
<div class="container_12">

	<div class="head  graybg-d2 grid_12">
    		<div class="logo grid_8 alpha">
            	<h1>WebUI-FrameWork</h1>
            </div>
             <div class="grid_4 omega">
            	<ul  class=" linkbar white">
                   <li><a href="#">welcome: Mr </a></li>
                    <li><a href="#" class="orange-l1">my account </a></li>
                    <li><span>my account </span></li>
                </ul>
            </div>
    </div>
    
    <div class="clear"></div>
    
    
    <div class="grid_12 menubar">
         <ul class="grid_9 menu alpha">
         		<li><a href="#">首页</a></li>
                <li class="current"><a href="#">工具下载</a></li>
                 <li><a href="#">文档教程</a></li>
                <li><a href="#">项目</a></li>
         </ul>
         <div class="grid_3 omega">
            <input type="text" name="search" id="search" class="search-input" style="width:100px;" /> 
         </div>
    </div>
     <div class="clear"></div>
     <div class="spacer"></div>
     
     <div class="grid_12 pathbar white">
          <a href="#">首页</a>&nbsp;&nbsp; \&nbsp;&nbsp;  <a href="#">科技新闻</a>&nbsp;&nbsp;  \&nbsp;&nbsp;  <span>新闻内容</span>
     </div>
     <div class="clear"></div>
     <div class="spacer"></div> 
     
     <div class="grid_12">
        <div class="grid_8 alpha whitebg">
          <div class="panel panel-big">
                 <div class="phead">
                     <h1 class="gre">标题</h1>
                 </div>
                 <div class="article">
                 		<h2>世界首个无线充电智能手机正式发售</h2>
                        <h3>2011年8月6日 8:20  &nbsp;&nbsp;&nbsp;&nbsp;中国新闻网 <a href="#" class="blue">我要评论(1)</a></h3>
                        <p>日本最大电信运营商NTT Docomo联合夏普于上周末正式发售了世界首个自带无线充电功能的智能手机&quot;AQUOS PHONE f SH-13C&quot;。这款智能机运行Android 2.3操作系统，产品自身附带夏普&quot;Qi&quot;无线充电器&quot;Wireless Charger SH01&quot;，将手机置于其上即可充电，无需连接任何线缆。</p>
                        <p> 同时该机附带IPX5/IPX7级别的防水功能和IP5X级别的防尘功能，作为典型的日系手机还拥有其他许多同类产品不再具备的红外通信功能。产品采用一块3.7英寸夏普制qHD（分辨率960*540）触控屏。采用800万像素CMOS摄像头，可进行720p MP4影片录制。硬件配置方面，CPU为高通MSM8255 1GHz，内置512MB RAM和2GB ROM，支持最大32GB的microSD卡扩展，支持802.11 b/g/n WiFi和GSM/WCDMA/HSDPA。</p>
                        <p> 这款手机外形方面仍然是夏普一贯的设计风格，尺寸仅为119*60*10.9mm，最厚处约11.5mm，重量约121g，有3种颜色（黑、白、粉）外壳的型号可选。 </p>
                        <p>日本最大电信运营商NTT Docomo联合夏普于上周末正式发售了世界首个自带无线充电功能的智能手机&quot;AQUOS PHONE f SH-13C&quot;。这款智能机运行Android 2.3操作系统，产品自身附带夏普&quot;Qi&quot;无线充电器&quot;Wireless Charger SH01&quot;，将手机置于其上即可充电，无需连接任何线缆。</p>
                        <p>&nbsp;</p>
                 </div>
          </div>
        </div>
        <div class="grid_4 omega" >
          <div class="panel whitebg panel-big">
                 <div class="phead">
                     <h1 class="graygbg">标题</h1>
                 </div>
                 <ul class="vmenu vmenu-icon">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">软件</a></li>
                    <li><a href="#">project</a></li>
                     <li><a href="#">home</a></li>
                    <li><a href="#">soft</a></li>
                    <li><a href="#">项目</a></li>
                </ul>
          </div>
          
          <div class="spacer"></div>
          
     <div class="panel whitebg">
                 <div class="phead">
                     <h1 class="red">标题</h1>
                 </div>
                 <div class="pcontent">
                        <ul class="list list-icon">
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                             <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                       </ul>
           </div>
          </div>
        </div>
    </div>
    <div class="clear-spacer"></div>
    
    
    <div class="grid_12">
            <div class="toolbar-big"> 
                      <ul> 
                        <li class="current">  <a href="#">  <span class="icon icon-dashboard"></span> 控制台</a> </li> 
                        
                        <li> 
                          <a href="#"> 
                            <span class="icon icon-pencil"></span> 
                            表单
                          </a> 
                        </li> 
                        
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-tables"></span> 
                            数据表
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon  icon-chart"></span> 
                            <span class="badge">3</span> 
                            统计
                          </a> 
                        </li> 
                        
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-modal"></span> 
                            通知
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-newspaper"></span> 
                            印刷
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-anchor"></span> 
                              按钮
                          </a> 
                        </li>               
                      </ul> 
            </div>   
    </div>  
     
     
     <div class="grid_12">
   	   <table border="0" cellspacing="0" cellpadding="0" class="table table-big">
     	   <tr>
     	     <th width="5%" scope="col">序号&nbsp;</th>
     	     <th width="44%" scope="col">标题&nbsp;</th>
     	     <th width="11%" scope="col">分类&nbsp;</th>
     	     <th width="20%" scope="col">主题词&nbsp;</th>
     	     <th width="20%" scope="col">操作&nbsp;</th>
   	     </tr>
     	   <tr>
     	     <td>1</td>
     	     <td>
     	       <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
   	         </td>
     	     <td>国内</td>
     	     <td>央视，企业</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                <a href="#" class="button icon remove danger">删除</a>
              </td>
   	     </tr>
     	   <tr>
     	     <td>2</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
     	     <td>社会</td>
     	     <td>郑州，志愿者</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                <a href="#" class="button icon remove danger">删除</a>
             </td>
   	     </tr>
     	   <tr>
     	     <td>3</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
     	     <td>地方</td>
     	     <td>郑州，志愿者</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                 <a href="#" class="button icon remove danger">删除</a>
              </td>
   	     </tr>
     	   <tr>
     	     <td>4</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
     	     <td>地方</td>
     	     <td>&nbsp;</td>
     	     <td>
                 <a href="#" class="button icon edit">编辑</a>
                 <a href="#" class="button icon remove danger">删除</a>
             </td>
   	     </tr>
   	   </table>
     </div>
      <div class="clear"></div>
      <div class="spacer"></div>
      
      <div class="grid_3">
      		<div class="panel panel-success">
                 <p>成功信息...</p>
            </div>
      </div>
      
      <div class="grid_3">
      		<div class="panel panel-info">
                 <p>通知信息...</p>
            </div>
      </div>
      
       <div class="grid_3">
      		<div class="panel panel-warning">
                 <p>警告信息...</p>
            </div>
      </div>
      
      <div class="grid_3">
      		<div class="panel panel-error">
                 <p>错误信息...</p>
            </div>
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
      
      
       <div class="grid_12 ">
   	   <table border="0" cellspacing="0" cellpadding="0" class="table2">
     	   <tr>
     	     <th width="11%" scope="col">序号&nbsp;</th>
     	     <th width="38%" scope="col">标题&nbsp;</th>
     	     <th width="11%" scope="col">分类&nbsp;</th>
     	     <th width="20%" scope="col">主题词&nbsp;</th>
     	     <th width="20%" scope="col">操作&nbsp;</th>
   	     </tr>
     	   <tr>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr class="odd">
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr class="odd">
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
   	   </table>
     </div>
      <div class="clear"></div>
      <div class="spacer"></div>
     
     
     <div class="grid_12 whitebg" style="padding:20px 0;" >
    	
          <div class="grid_3">
              
                  <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                   <a href="#" class="button pill"> &nbsp;按 钮&nbsp; </a>
                    <a href="#" class="button danger"> &nbsp;按 钮&nbsp; </a>
                   
              
          </div>
          
           <div class="grid_3">
               <div class="button-group">
                  <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                   <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                    <a href="#" class="button danger"> &nbsp;按 钮&nbsp; </a>
                   
               </div>
          </div>
          
           <div class="grid_3">
               <div class="button-group">
                  <a href="#" class="button primary pill"> &nbsp;按 钮&nbsp; </a>
                   <a href="#" class="button pill "> &nbsp;按 钮&nbsp; </a>
                    <a href="#" class="button pill danger"> &nbsp;按 钮&nbsp; </a>
                   
               </div>
          </div>
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
       
      <div class="grid_12 whitebg" style="padding:20px 0;" > 
           <div class="grid_3 alpha">
              
                  <a href="#" class="button icon search"> &nbsp;查询&nbsp; </a>
                   
                    <a href="#" class="button danger icon remove"> &nbsp;删除&nbsp; </a>
                   
              
          </div>
          
           <div class="grid_9 omega">
               <div class="button-group">
                  <a href="#" class="button icon add"> &nbsp;添加&nbsp; </a>
                   <a href="#" class="button icon edit"> &nbsp;编辑&nbsp; </a>
                    <a href="#" class="button icon loop"> &nbsp;刷新&nbsp; </a>
                   <a href="#" class="button icon search"> &nbsp;查询&nbsp; </a>
                   <a href="#" class="button icon user"> &nbsp;用户管理&nbsp; </a>
               </div>
          </div>
      
      </div>
     
     
     
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
      <div class="grid_4 whitebg">
          <div class="panel">
              <div class="phead blue">
                  <h1>标题3</h1>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info ">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                        
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <div class="clear"></div>
                    
                    <div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                   
                    <div class="clear"></div> 
                    
                    <div class="item">
                        <div class="pic grid_1 alpha" >
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="green">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                     <div class="clear"></div>
                    
              </div>
          </div>
      </div>
      
      <div class="grid_8 whitebg">
          <div class="panel">
              <div class="phead blue">
                  <h1>标题3</h1>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                        <div class="clear"></div>
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                         <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                         <div class="clear"></div>
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                         <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
               </div>
           </div>              
      </div>
      
       <div class="clear"></div>
      <div class="spacer"></div>
      
       <div class="grid_4">
           <div class="panel whitebg">
              <div class="phead orange">
                  <h1>标题3</h1>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                       
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
                    <div class="item">
                       
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
                    <div class="item">
                        
                        <div class="info">
                             <h3><a href="#" class="green">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
              </div>
          </div>            
      </div>
      
       <div class="grid_8">
          <div class="panel whitebg">
              <div class="phead blue">
                  <h1>标题3</h1>
              </div>
              <div class="pcontent cards">
              		
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb13.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb11.jpeg" /></a>
                        </div>
                       <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb12.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb12.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb11.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb13.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                  
                    <br class="clearf"/>
               </div>
           </div>              
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
      
        
      
       <div class="grid_12">
          <div class="panel whitebg">
              <div class="phead orange">
                  <h1>标题5</h1>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_2 alpha">
                           <a href="#"><img src="../images/demo/thumb-book.jpg"/></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>一本撼动数亿人心灵的勇气之书！没有一本书，比力克的故事更能带给你希望！<br />
                             他82年出生，生下来就和我们不一样，连妈妈都不想碰他一下！十岁之前三次想要自杀！中学当选为学生会副主席，本科获得两个学位！游泳冲浪踢足球样样全能，他走遍34个国家，演讲1500余场，给人信心、希望、爱和勇气！他就是力克·胡哲！</p>
                        </div>
                    </div>
                    <br class="clearf"/>
               </div>
           </div>              
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      <div class="grid_12">
          <div class="panel whitebg">
              <div class="phead orange">
                  <h1>标题5</h1>
              </div>
              <div class="pcontent cards">
              		<div class="item  grid_2 alpha">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                    
                    <div class="item  grid_2 ">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                    
                    
                    <div class="item  grid_2">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                    
                    <div class="item  grid_2">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                    
                    <div class="item  grid_2">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                    <div class="item  grid_2 omega">
                        <div class="pic">
                           <a href="#"><img src="../images/demo/thumb2.jpg"/></a>
                        </div>
                        <div class="info-center">
                             <p>雄鹰展翅</p>
                        </div>
                    </div>
                     <br class="clearf" />         
                   
               </div>
           </div>              
      </div>
      
      
      <div class="clear"></div>
      <div class="spacer"></div>  
      
      <div class="grid_12 foot greenbg2"  >
             <p><a href="#">welcome: Mr </a>  |  <a href="#" class="orange-l1">my account </a> | <span>my account </span></p>
             <p>copy rights  汉龙数码科技有限公司2001－2011</p>
      </div>
      <div class="clear"></div>
       <div class="spacer"></div>
      
</div><!--end container-->


</body>
</html>
